<template>
    <div class="easyd-weixin-Box">

        <div class="search_box">
            <span class="screen" @click="searchAllAction"><!-- <i class="fa fa-filter"></i> -->全部</span>
            <input type="text" v-model="searchValue" placeholder="请输入校区名称"/>
            <span class="search" @click="searchData">搜索</span>
        </div>
        <div class="nav_list">
            <ul>
                <li @click="navListActiveBtn('0')" :class="navListActive == '0' ? 'active' : ''">待跟进<span></span></li>
                <li @click="navListActiveBtn('1')" :class="navListActive == '1' ? 'active' : ''">跟进中<span></span></li>
                <li @click="navListActiveBtn('2')" :class="navListActive == '2' ? 'active' : ''">已成交<span></span></li>
                <li @click="navListActiveBtn('4')" :class="navListActive == '4' ? 'active' : ''">公共池<span></span></li>
            </ul>
        </div>

        <div class="C4" style="padding: 4px 10px;">
            <div style="float: left">
                共有：{{searchArr.length}}家
            </div>
            <div style="float: left"
                 v-if="navListActive==4 && (($userData.getIsManager()==1&&$userData.getOsType()<3) || $userData.getUID() == $userData.getLeader()) ">
                ，若需要激活请
                <span @click="stopState = !stopState" style="color: #fbd415;"
                      v-html="stopState ? '取消激活' : '选择激活'"></span>
            </div>
        </div>

        <div class="app_page_box" style="top: 110px;">
            <div class="app_page" style="padding-top: 0px;">
                <div class="customer_pool_list app_box_content_list app_list_box" v-for="(item,index) in searchArr"
                     @click="goCustomerDetail(item)">
                    <!--<img src="../../../../static/images/fuwukaxiangqing3.jpg" />-->
                    <div class="txt_img">
                        {{item.c_name[0]}}
                    </div>
                    <div class="customer_pool_info">
                        <div class="app_box_flex" v-if="navListActive == 0">
                            <div class="app_box_content_left">
                                {{item.c_campus_name}}
                            </div>
                            <div class="app_box_content_right" style="color: #FE4117;">
                                <!-- {{item.customerStatus}} -->
                                待处理
                            </div>
                        </div>
                        <div class="app_box_flex" v-if="navListActive == 1">
                            <div class="app_box_content_left">
                                {{item.c_campus_name}}
                            </div>
                            <div class="app_box_content_right" style="color: #FE4117;" v-if="item.c_follow_status == 1">
                                跟进中({{item.followCount}})
                            </div>
                        </div>
                        <div class="app_box_flex" v-if="navListActive == 2">
                            <div class="app_box_content_left">
                                {{item.c_campus_name}}
                            </div>
                            <div class="app_box_content_right" style="color: #FE4117;" v-if="item.c_is_buy == 1">
                                已成交
                            </div>
                        </div>
                        <div class="app_box_flex" v-if="navListActive == 3">
                            <div class="app_box_content_left">
                                {{item.c_campus_name}}
                            </div>
                            <div class="app_box_content_right" style="color: #FE4117;"
                                 v-if="item.c_service_status == 0">
                                待处理
                            </div>
                        </div>
                        <div class="app_box_flex" v-if="navListActive == 4">
                            <div class="app_box_content_left">
                                {{item.c_campus_name}}
                            </div>
                            <div class="app_box_content_right" style="color: #FE4117;">
                                待分配
                            </div>
                        </div>
                        <div class="app_box_flex">
                            <div class="app_box_content_left">
                                <span class="T2">{{item.c_name}}</span>&nbsp;<span class="C4 T3">{{item.c_phone}}</span>
                            </div>
                            <div class="app_box_content_right C4" v-if="item.c_evaluation == 0">
                                一类客户
                            </div>
                            <div class="app_box_content_right C4" v-if="item.c_evaluation == 1">
                                二类客户
                            </div>
                            <div class="app_box_content_right C4" v-if="item.c_evaluation == 2">
                                三类客户
                            </div>
                            <div class="app_box_content_right C4" v-if="item.c_evaluation == 3">
                                四类客户
                            </div>
                            <div class="app_box_content_right C4" v-if="item.c_evaluation == 4">
                                五类客户
                            </div>
                        </div>
                    </div>
                    <div class="customer_pool_time C2 T3">
                        <span class="app_float_left" v-if="!item.provinceName"><span class="C1">地址：</span>暂无</span>
                        <span class="app_float_left C4" v-else><span class="C1">地址：</span>{{item.provinceName ?item.provinceName:''}}{{item.cityName?item.cityName:''}}{{item.areaName?item.areaName:''}}{{item.c_address== null?'':item.c_address}}</span>
                        <!--<span class="app_float_right">{{$common.getTimes(item.c_create_time)}}</span>-->
                    </div>
                    <div class="customer_pool_time C2 T3" v-if="item.followInfo.cfr_create_time">
                        <span class="app_float_left C4"><span class="C1">最近跟进：</span>{{followTypeData[item.followInfo.cfr_way]}}（{{item.followInfo.u_nickname}}）</span>
                        <span class="app_float_right C4">{{$common.getTimes(item.followInfo.cfr_create_time,'shifen')}}</span>
                    </div>

                    <div v-show="stopState" class="stop_follow_box" @click.stop="stopFollow(item,index)">
                        <div class="stop_follow_btn_box">
                            <img src="../../../../static/images/weixuanzhong.png" width="100%" v-if="!item.isSelected"/>
                            <img src="../../../../static/images/xuanzhong.png" width="100%" v-if="item.isSelected"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="global_style_bottom_btn T2" v-show="stopState&navListActive==4" style="z-index: 1;">
            <div class="global_style_bottom_btn_left C2" style="flex: 3;text-align: left;background: #fbd415;">
				<span style="padding-left: 20px;" @click="allFollow()"
                      :class="allState ? 'ion-ios-circle-filled' : 'ion-ios-circle-outline'"><span
                        style="padding-left: 5px;">全选</span></span>
                <samp style="padding-left: 20px;">已选择{{stopStateNum}}个客户</samp>
            </div>
            <div class="global_style_bottom_btn_right" @click="sellSelect()"
                 style="color: #999;border-left: 1px solid #fff;">{{sellData.u_nickname}}
            </div>
            <div class="global_style_bottom_btn_right" @click="determineActivation()"
                 style="color: #fff;border-left: 1px solid #fff;">确定分配
            </div>
        </div>

    </div>
</template>

<script>
    import {mapState, mapMutations} from "vuex";

    export default {

        beforeRouteEnter(to, from, next) {
            if (from.path == '/selectSale') {
                to.meta.isBack = true;
            }
            next();
        },
        data() {
            return {
                searchArr: [],
                
                oldCustomData: [],
                searchValue: "",
                navListActive: '0', //顶部菜单选中
                followTypeData: ['电话跟进', '上门跟进', 'QQ跟进', '微信跟进', '短信跟进'],

                //停止跟进多选按钮
                stopState: false,
                allState: false,
                //停止跟进计数
                stopStateNum: 0,
            };
        },
        computed: {
            ...mapState({
                customerData: state => state.CustomerPoolModule.customerData,
                tempSell: state => state.HomeModule.tempSell,
                tempSellAll: state => state.HomeModule.tempSellAll,
                sellData: state => state.HomeModule.sellData,
            }),
        },
        watch: {
        },
        mounted() {
            //如果为后退回来的界面,不在进行编辑数据的请求
            if (!this.$route.meta.isBack) {
                console.log('正常打开页面')
//				this.navListActiveBtn('4')
                if (this.$route.query.condition == 1) {
                    // this.initData(1);
                    this.navListActiveBtn('1')
                } else if (this.$route.query.condition == 2) {
                    // this.initData(2);
                    this.navListActiveBtn('2')
                } else {
                    this.initData(3);
                }
            } else {
                console.log('返回页面')
                console.log(this.sellData)
                
                this.searchArr = this.customerData;

                this.stopState = sessionStorage.getItem('stopState') == 'true' ? true : false;
                this.stopStateNum = sessionStorage.getItem('stopStateNum');
                this.navListActive = sessionStorage.getItem('navListActive');
            }
            this.$route.meta.isBack = false;
        },
        methods: {
            searchAllAction() {
            	
                this.searchArr = this.customerData;
                this.searchValue = ""
//              this.$store.commit("CustomerPoolModule/updateCustomerData", this.oldCustomData);

            },
            searchData() {
                console.log(this.searchValue);

                this.searchArr = this.customerData;

                var searchArr = [];

                for (var i = 0; i < this.customerData.length; i++) {
                    if (this.customerData[i].c_campus_name.indexOf(this.searchValue) != -1) {
                        searchArr.push(this.customerData[i]);
                    }
                }

                this.searchArr = searchArr;
            },

            //  ...mapMutations(["ShopIndexModule/updateIsShopGuide"]),
            initData(type) {

                //              var uids = this.$userData.getUID();
                //              if (this.tempSell) {
                //                  uids = this.tempSell;
                //              }

                var isRoot = '';
                if (this.tempSellAll.u_master_osid != undefined && this.tempSellAll.u_master_osid != null && this.tempSellAll.u_master_osid != '') {

                    if (this.tempSellAll.is_group_leader == '1') {
                        isRoot = '' +
                            "/is_manager/0" +
                            "/u_id/" + this.tempSellAll.u_id +
                            "/os_id/" + this.tempSellAll.u_master_osid +
                            "/u_type/" + this.tempSellAll.u_type +
                            "/u_leader/" + this.tempSellAll.u_leader;
                    } else {
                        isRoot = '' +
                            "/u_id/" + this.tempSellAll.u_id +
                            "/os_id/" + this.tempSellAll.u_master_osid +
                            "/is_manager/" + this.tempSellAll.u_is_manager +
                            "/u_type/" + this.tempSellAll.u_type +
                            "/u_leader/" + this.tempSellAll.u_leader;
                    }
                } else {
                    isRoot = '' +
                        "/u_id/" + this.$userData.getUID() +
                        "/os_id/" + this.$userData.getOsid() +
                        "/is_manager/" + this.$userData.getIsManager() +
                        "/u_type/" + this.$userData.getOsType() +
                        "/u_leader/" + this.$userData.getLeader();
                }
                var that = this;

                this.$easyUtil.startLoading(this);
                this.$http.getHttp(
                    this.$API.apiCustomersList + isRoot + "/searchType/" + type,
                    rs => {
                        this.$easyUtil.endLoading(this);

                        this.getStatus(rs);

                        //重新排序
                        // console.log(rs.customerInfo)
                        var arrRes = Enumerable.From(rs.customerInfo).OrderByDescending(x => parseInt(x.cfr_createtime)).ToArray();
                        console.log("-------")
                        console.log(arrRes)
                        console.log("-------")
                        this.$store.commit("CustomerPoolModule/updateCustomerData", arrRes);
                        this.oldCustomData = arrRes

                        var tempSellData = {
                            u_id: '',
                            u_nickname: '选择销售',
                            u_phone: '',
                        }
                        this.$store.commit("HomeModule/updateSellData", tempSellData);
                        
                        that.searchArr = that.customerData;
                    }
                );
            },
            goCustomerDetail(item) {
                this.$easyUtil.GO(this, '/userDetail', {
                    customerId: item.c_id,
                    isShowStopCustom: this.navListActive == '4' ? true : false
                })
            },
            //顶部菜单选中
            navListActiveBtn(e) {
                this.searchValue = "";
                var menuIndex = e;
                if (e == 0) {
                    menuIndex = 3
                }
                this.navListActive = e;
                if (this.navListActive == 4) {

                } else {
                    this.stopState = false;
                    this.stopStateNum = 0;
                }
                this.initData(menuIndex);
            },
            getStatus(rs) {
                var customers = rs.customerInfo;
                var customerStatus = '';
                for (var i = 0; i < customers.length; i++) {
                    if (customers[i].c_service_status > 1) {
                        customerStatus = "已完成";
                    } else {
                        if (customers[i].c_is_buy > 0) {
                            customerStatus = "待处理";
                        } else {
                            if (customers[i].c_follow_status > 0) {
                                if (customers[i].c_follow_status > 1) {
                                    customerStatus = "停止跟进";
                                } else {
                                    customerStatus = "跟进中";
                                }
                            } else {
                                if (customers[i].c_distribution_status > 0) {
                                    customerStatus = "待跟进";
                                } else {
                                    customerStatus = "待分配";
                                }
                            }
                        }
                    }
                    customers[i].customerStatus = customerStatus;
                }
            },

            //全选操作
            allFollow(item, index) {
                this.allState = !this.allState;
                if (this.allState) {
                    this.stopStateNum = this.searchArr.length;
                    for (var ss = 0; ss < this.searchArr.length; ss++) {
                        this.searchArr[ss].isSelected = true;
                    }
                } else {
                    this.stopStateNum = 0;
                    for (var ss = 0; ss < this.searchArr.length; ss++) {
                        this.searchArr[ss].isSelected = false;
                    }
                }
            },
            //多选操作
            stopFollow(item, index) {
                item.isSelected = !item.isSelected;
                if (item.isSelected) {
                    this.stopStateNum++;
                } else {
                    this.stopStateNum--;
                    if (this.allState && this.searchArr.length > this.stopStateNum) {
                        this.allState = false;
                    }
                }
            },
            //选择销售
            sellSelect() {
                sessionStorage.setItem('stopState', this.stopState);
                sessionStorage.setItem('stopStateNum', this.stopStateNum);
                sessionStorage.setItem('navListActive', this.navListActive);
                
                var that = this;
                this.$store.commit("CustomerPoolModule/updateCustomerData", that.searchArr);
                this.$easyUtil.GO(this, '/selectSale');
            },
            //分配销售
            determineActivation() {
                var params = {}
                params.customerArr = []
                params.u_id = this.sellData.u_id;
                for (var ss = 0; ss < this.searchArr.length; ss++) {
                    if (this.searchArr[ss].isSelected == true) {
                        params.customerArr.push(this.searchArr[ss].c_id)
                    }
                }

                if (params.u_id == '') {
                    this.$easyUtil.alert(this, '提示', '请选择销售人员');
                    return;
                }
                if (params.customerArr.length <= 0) {
                    this.$easyUtil.alert(this, '提示', '请选择需要分配的客户');
                    return;
                }
                console.log(params)


                this.$easyUtil.startLoading(this)
                this.$http.postHttp(this.$API.arrangeCustomerToSale, params, (rs) => {

                    this.$easyUtil.endLoading(this)
                    this.$easyUtil.successToast(this, '分配成功');

                    var tempSellData = {
                        u_id: '',
                        u_nickname: '选择销售',
                        u_phone: '',
                    }
                    this.$store.commit("HomeModule/updateSellData", tempSellData);

                    this.stopState = false;
                    this.allState = false;
                    this.stopStateNum = 0;
                    this.navListActiveBtn('4');

                })
            },
        },

    };
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
    .search_box {
        line-height: 40px;
        background: #fff;
        margin-bottom: 5px;
        text-align: center;
        display: flex;
        align-items: center;
    }

    .search_box .screen {
        flex: 1;
    }

    .search_box input {
        flex: 3;
        border-radius: 100px;
        border: 0;
        background: #f4f4f4;
        padding: 5px 10px;
    }

    .search_box .search {
        flex: 1;
        color: #FBD415;
    }

    .nav_list {
        line-height: 40px;
        background: #fff;
    }

    .nav_list ul {
        display: flex;
    }

    .nav_list ul li {
        flex: 1;
        text-align: center;
        list-style: none;
        position: relative;
    }

    .nav_list ul li span {
        position: absolute;
        bottom: 0;
        background: #fff;
        width: 50%;
        left: 25%;
        height: 1px;
    }

    .nav_list ul li.active {
        color: #FBD415;
    }

    .nav_list ul li.active span {
        background: #FBD415;
    }

    .customer_pool_list {
        /*overflow: hidden;*/
    }

    .customer_pool_list .customer_pool_info {
        float: initial;
    }

    .customer_pool_list .customer_pool_time {
        overflow: hidden;
        width: 100%;
    }

    .customer_pool_list .customer_pool_time .app_float_left {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 60%;
    }

    .customer_pool_list .customer_pool_time .app_float_right {
        /*border: 1px solid #fbd415;
        padding: 0 10px;
        line-height: initial;
        border-radius: 4px;
        margin-top: 5px;*/
    }

    .customer_pool_list .txt_img {
        display: block;
        height: 40px;
        width: 40px;
        margin: 10px;
        margin-left: 0;
        text-align: center;
        line-height: 40px;
        background: #000;
        color: gold;
        float: left;
        border-radius: 100px;
        object-fit: cover;
    }

    .customer_pool_list img {
        display: block;
        height: 50px;
        width: 70px;
        padding: 5px 10px 5px 0;
        float: left;
        object-fit: cover;
    }

    .global_style_bottom_btn {
        width: 100%;
        height: 50px;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
        bottom: 0px;
        z-index: 1;
        left: 0px;
        text-align: center;
        line-height: 50px;
    }

    .global_style_bottom_btn .global_style_bottom_btn_left {
        -ms-flex: 1;
        flex: 1;
        background: #fff;
    }

    .global_style_bottom_btn .global_style_bottom_btn_right {
        -ms-flex: 1;
        flex: 1;
        background: #fbd415;
    }

    .stop_follow_box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .stop_follow_box .stop_follow_btn_box {
        position: absolute;
        width: 20px;
        height: 20px;
        left: -10px;
        top: 35%;
    }

    .stop_follow_box .stop_follow_btn_box img {
        width: 100%;
        height: 100%;
    }
</style>